<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        *{margin:0; padding:0;}
        ul{list-style:none;}
        ul li{float:left; width:100px; height:40px;  margin-right:10px; display:inline;}
        div li:hover{
            background-color: #ff6600;

        }
    </style>
</head>

<body>
<div style="width:500px; height:40px;">
    <ul>
        <li class="fl active" onmouseover="yingdian(0)" style="display: block">
            摄影作品
            <div class="dao-xian"></div>
        </li>
        <li class="fl active" onmouseover="yingdian(1)">
            摄影作品
            <div class="dao-xian"></div>
        </li>
        <li class="fl active" onmouseover="yingdian(2)">
            摄影作品
            <div class="dao-xian"></div>
        </li>
    </ul>
</div>
<div id="right">
    <img width="200" height="200" src="http://www.shumasheying.org.cn/upload/admin/20200513/ced6f9c86ca0e21a922371a32ce0656d_thumb_366_200_1_q90.jpg" />
    <img width="200" height="200"  src="http://www.shumasheying.org.cn/upload/admin/20200928/345668d9f995d7955067869a5d4a3c6f_thumb_366_200_1_q90.jpg" />
    <img width="200" height="200"  src="http://www.shumasheying.org.cn/upload/admin/20200928/905d4a7176ee5bd8d2999f4032097b41_thumb_366_200_1_q90.jpg" />
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios框架-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var lis = document.getElementsByTagName('li'),
        len = lis.length,
        imgs = document.getElementById('right').getElementsByTagName('img');

    for(var i = 0; i < len; i++){
        !function(i){
            lis[i].onmouseover = function(){
                imgs[i].style.display = 'block';
            };
            lis[i].onmouseout = function(){
                imgs[i].style.display = 'none';
            };
        }(i)
    }
</script>

</body>
</html>
